<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"
      integrity="sha256-QvgynZibb2U53SsVu98NggJXYqwRL7tg3FeyfXvPOUY="
      crossorigin="anonymous"
    ></script>
    <style>
      div {
        width: 1000px;
        height: 800px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="chart1" style="width: 935px"></div>
    <script>
      let dom = document.querySelector(".chart1");
      let myChart1 = echarts.init(dom);
      myChart1.setOption({
        title: {
          text: "柱状图",
        },
        legend: {
          data: ["日期"],
        },
        grid: {
          show: true,
          //   left: "40%",
          containLabel: true,
          backgroundColor: "#ccc",
        },
        xAxis: {
          data: ["裤子", "袜子", "鞋子", "书包", "日用品", "家居", "电子参评"],
          splitLine: {
            show: false,
          },
          axisLine: false,
        },
        yAxis: {
          splitLine: {
            show: false,
          },
          axisLine: false,
        },
        series: [
          {
            name: "日期",
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      });
    </script>
  </body>
</html>
